<template>
  <div id="loginDv">
    <el-form ref="form" :model="form">
      <el-form-item>
        <el-input v-model="form.name" prefix-icon="el-icon-user-solid"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.password"
          prefix-icon="fa fa-unlock-alt"
          @keyup.enter.native="login"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { doLogin } from "../api/user";
export default {
  name: "Login",
  data() {
    return {
      form: {
        name: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      var user = this.form;
      var _this = this;
      const redirect = this.$router.history.current.query.redirect;
      doLogin(user)
        .then(function(res) {
          var u = res.data.data;
          if (u != null) {
            _this.$store.commit("setUser", u);
            if (redirect) {
              _this.$router.push(redirect);
            } else {
              _this.$router.push({ name: "Home" });
            }
          } else {
            Message.error("用户名或密码错误.");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
body {
  overflow: hidden;
  background: url("../assets/bg.jpg");
  background-repeat: no-repeat;
}
#loginDv {
  margin: 200px auto;
  width: 200px;
  padding: 20px 20px 10px 20px;
  border-radius: 10px;
  background: rgba(240, 240, 240, 0.8);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>